<!DOCTYPE html>
<html lang="en">
<head>
    <title>留言板</title>
    <meta charset="UTF-8">
    <style>
        div {
            margin: 0;
            padding: 0;
            font-size: 12px;
            margin: 0 auto;
        }

        h3 {
            text-align: center
        }

        #container {
            width: 500px;
        }

        .article {
            border: 1px solid #a6cbe7;
            margin-top: 5px;
        }

        .author {
            background-color: #0099FF;
            width: 100%;
            height: 24px;
            line-height: 24px;
        }

        .content {
            height: 40px;
            padding: 10px;
        }

        .author span {
            float: right;
            padding-right: 10px;
        }

        .time {
            border-top: solid 1px #a6cbe7;
        }

        .page {
            text-align: right;
            height: 30px;
            line-height: 30px;
            padding-right: 10px;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>
<div id="container">
    <div><h3>留言板</h3></div>
    <div>
        用户：<input type="text" v-model="search.author"> 留言：<input type="text" v-model="search.message"> <input
            id="search" type="button" value="搜索" @click="handleSearch">


        <div v-for="msg in messageList" :key="msg.id" class="article">
            <div class="author">用户:{{msg.author}}<span>{{msg.id}}#</span></div>
            <div class="content">{{msg.message}}</div>
            <div class="time page">发表于:{{msg.createDate}}</div>
        </div>


    </div>

    <div class="page">
        <span id="prePage" @click="handlePrePage">上一页</span> <span id="nextPage">下一页</span>
    </div>
    <br>
    <div>
        <form id="myForm">
            <div>
                用户: <input type="text" v-model="msg.author" value=""/>
            </div>
            <br>
            <div>
                留言: <textarea v-model="msg.message" rows="5" cols="72"></textarea>
            </div>
            <div align="center"><input type="reset" value="清除"/> <input id="submit" type="button" value="发表"
                                                                        @click="handleSubmit"/></div>
        </form>
    </div>
</div>
</body>
</html>
<script>
    const {createApp, ref, onMounted} = Vue

    createApp({
        setup() {
            //响应数据必须用ref修饰 , 被监听的数据
            const messageList = ref()
            let queryObj = {pageSize: 5, pageNum: 1}

            //初始化数据onMounted钩子函数
            onMounted(() => {
                queryData()
            })

            function queryData() {
                fetch('http://localhost:8080/message/query', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    body: JSON.stringify(queryObj)
                }).then(response => {
                    return response.json()
                }).then(data => {
                    console.log(data)
                    if (data.code == 200) {
                        messageList.value = data.data.list
                    } else {
                        alert(data.message)
                    }
                })
            }

            let msg = ref({author: '', message: ''})
            let handleSubmit = () => {
                fetch('http://localhost:8080/message/insert', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    body: JSON.stringify(msg.value)
                }).then(response => {
                    return response.json()
                }).then(data => {
                    if (data.code == 200) {
                        queryData()
                    }
                })
            }

            let search = ref({author: '', message: ''})
            let handleSearch = () => {
                if (search.value.author != '') {
                    queryObj = {...queryObj, author: search.value.author}
                } else {
                    delete queryObj.author;
                }
                if (search.value.message != '') {
                    queryObj = {...queryObj, message: search.value.message}
                } else {
                    delete queryObj.message;
                }
                queryData()
            }

            //在模板中使用的方法、数据，都要return
            return {
                messageList, handleSubmit, msg, handleSearch, search
            }
        }
    }).mount('#container')
</script>
